<template>
  <div class="dialog_box">
    <div class="dialog_content">
      <el-menu
        :default-active="activeIndex"
        class="el-menu-demo"
        mode="horizontal"
        @select="handleSelect"
       >
        <el-menu-item index="1" class="title" :class="{'active':'1'== activeIndex}">基本信息</el-menu-item>
        <el-menu-item index="2" class="title" :class="{'active':'2'== activeIndex}">名下关联房屋</el-menu-item>
        <el-menu-item index="3" class="title" :class="{'active':'3'== activeIndex}">名下关联车辆</el-menu-item>
        <el-menu-item index="4" class="title" :class="{'active':'4'== activeIndex}">轨迹信息</el-menu-item>
      </el-menu>
      <div class="content">
        <div v-show="activeIndex=='1'">
          <div>
            <el-form ref="form" :model="baseform">
              <el-row>
                <el-col :span="10">
                  <el-form-item label="姓名" class="label">
                    <div>
                      <el-input v-model="baseform.name" class="input" style="width:240px"></el-input>
                      <el-button type="primary" size="mini" @click="showEcharts">关系图谱</el-button>
                    </div>
                  </el-form-item>
                </el-col>
                <el-col :span="10" :offset="4">
                  <el-form-item label="电话" class="label">
                    <el-input v-model="baseform.phone" class="input"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="10">
                  <el-form-item label="证件类型" class="label">
                    <el-input v-model="baseform.type" class="input"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="10" :offset="4">
                  <el-form-item label="证件号" class="label">
                    <el-input v-model="baseform.idNum" class="input"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="10">
                  <el-form-item label="性别" class="label">
                    <el-input v-model="baseform.sex" class="input"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="10" :offset="4">
                  <el-form-item label="居住类型" class="label">
                    <el-input v-model="baseform.livetype" class="input"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="10">
                  <el-form-item label="文化程度" class="label">
                    <el-input v-model="baseform.education" class="input"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="10" :offset="4">
                  <el-form-item label="婚姻状况" class="label">
                    <el-input v-model="baseform.ismarried" class="input"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="10">
                  <el-form-item label="身高（厘米）" class="label">
                    <el-input v-model="baseform.height" class="input"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="10" :offset="4">
                  <el-form-item label="工作单位" class="label">
                    <el-input v-model="baseform.work" class="input"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <div class="label" style="font-weight:500;margin-bottom:10px;">人员标签</div>
                  <div
                    style="border-radius: 4px;border: 1px solid #dcdfe6;display:flex;justify-content: space-between;align-items: center;padding:0 15px;width:94%;"
                  >
                    <div>
                      <el-tag class="tags">标签一</el-tag>
                      <el-tag type="success">标签二</el-tag>
                    </div>
                    <div>
                      <el-button type="text" @click="handleinner" class="edits">编辑</el-button>
                    </div>
                  </div>
                </el-col>
              </el-row>
              <el-row style="margin-top:20px;">
                <el-col :span="10">
                  <div class="label" style="font-weight:500;margin-bottom:10px;">头像图片</div>
                  <el-image
                    @click="showImg(url)"
                    style="width: 100px; height: 100px"
                    :src="url"
                    :fit="fit"
                  ></el-image>
                </el-col>
                <el-col :span="10" :offset="4">
                  <div class="label" style="font-weight:500;margin-bottom:10px;">证件图片</div>
                  <el-image
                    @click="showImg(url)"
                    style="width: 100px; height: 100px"
                    :src="url"
                    :fit="fit"
                  ></el-image>
                </el-col>
              </el-row>
            </el-form>
            <el-dialog width="50%" title :visible.sync="innerVisible" append-to-body>
              <div class="dialog_title">标签管理</div>
              <div>
                <el-tag
                  v-for="(tag,i) in tags"
                  :key="tag.name"
                  :type="tag.type"
                  effect="dark"
                  @click="isShow(tag,i)"
                  style="margin:5px 10px;position: relative;"
                >
                  {{tag.name}}
                  <div class="select_tag" v-if="tag.show">
                    <img :src="gou" alt />
                  </div>
                </el-tag>
              </div>
              <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="innerVisible = false">保存</el-button>
              </span>
            </el-dialog>

            <el-dialog width="50%" title :visible.sync="isgraph" append-to-body>
              <div class="dialog_title">关系图谱</div>
              <div style="width:100%;height:500px;">
                <Graph></Graph>
              </div>
            </el-dialog>
          </div>
          <div class="dialog_title" style="margin-top:20px;">历史申请</div>
          <el-table
            :data="history"
            :header-cell-style="{background: '#EBECF0',height:'44px',color:'#000000'}"
            :cell-style="{background: '#ffffff',height:'44px',color:'#000000'}"
            border
            style="width: 100%"
           >
            <el-table-column label="序号" type="index" :index="indexMethod" width="100"></el-table-column>
            <el-table-column property="title" width="200" label="动作"></el-table-column>
            <el-table-column property="name" width="200" label="操作人"></el-table-column>
            <el-table-column property="time" width="200" label="时间"></el-table-column>
            <el-table-column property="detail" label="详情"></el-table-column>
          </el-table>
        </div>

        <div v-show="activeIndex=='2'">
          <el-form :model="formInline" :inline="true">
            <div class="search">
              <el-form-item label="关联状态">
                <el-select v-model="formInline.region" placeholder="选择关联状态">
                  <el-option label="区域一" value="shanghai"></el-option>
                  <el-option label="区域二" value="beijing"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" size="mini">查询</el-button>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" size="mini" @click="addhouse">新增关联房屋</el-button>
              </el-form-item>
            </div>
          </el-form>

          <el-table
            :data="housedata"
            :header-cell-style="{background: '#EBECF0',height:'44px',color:'#000000'}"
            :cell-style="{background: '#ffffff',height:'44px',color:'#000000'}"
            highlight-current-row
            style="width: 100%"
          >
            <el-table-column label="序号" type="index" :index="indexMethod" width="100"></el-table-column>
            <el-table-column property="community" width="200" label="小区"></el-table-column>
            <el-table-column property="door" width="180" label="单元-门票"></el-table-column>
            <el-table-column property="status" width="160" label="关联状态"></el-table-column>
            <el-table-column property="relation" label="和房子关系" width="200"></el-table-column>
            <el-table-column label="操作" width="200">
              <template slot-scope="scope">
                <div class="related">
                  <img src="../../assets/一房一档slices/微信图片_20201207092659.png" alt class="record" />
                  <div>{{scope.row.option}}</div>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>

        <div v-show="activeIndex=='3'">
          <el-table
            :data="cardata"
            :header-cell-style="{background: '#EBECF0',height:'44px',color:'#000000'}"
            :cell-style="{background: '#ffffff',height:'44px',color:'#000000'}"
            highlight-current-row
            style="width: 100%"
          >
            <el-table-column label="序号" type="index" :index="indexMethod" width="100"></el-table-column>
            <el-table-column property="carnum" width="200" label="车牌号"></el-table-column>
            <el-table-column property="type" width="200" label="车辆类型"></el-table-column>
            <el-table-column property="relation" width="200" label="关联状态"></el-table-column>
            <el-table-column property="position" label="车位"></el-table-column>
          </el-table>
        </div>

        <div v-show="activeIndex=='4'" style="position:relative;">
          <el-table
            :data="guijidata"
            :header-cell-style="{background: '#EBECF0',height:'44px',color:'#000000'}"
            :cell-style="{background: '#ffffff',height:'44px',color:'#000000'}"
            highlight-current-row
            style="width: 100%"
          >
            <el-table-column label="序号" type="index" :index="indexMethod" width="100"></el-table-column>
            <el-table-column property="time" width="200" label="时间"></el-table-column>
            <el-table-column property="community" width="200" label="小区"></el-table-column>
            <el-table-column property="position" width="120" label="位置"></el-table-column>
            <el-table-column property="type" label="类型"></el-table-column>
            <el-table-column property="pic" label="抓拍画面">
              <template slot-scope="scope">
                <img :src="scope.row.pic" class="img" alt @click="showImg(scope.row.pic)" />
              </template>
            </el-table-column>
          </el-table>

          <div class="pagination">
            <el-pagination
              :current-page.sync="page"
              background
              :page-sizes="[10, 20, 30, 40]"
              layout="total, prev, pager, next, jumper"
              :total="total"
              @current-change="handleCurrentChange"
            />
          </div>
        </div>
      </div>
      <!-- 图片放大 -->
      <img-dialog v-if="isShownimg" :img="chooseImg" @closeImg="closeImg" />
      <!-- 第二层 -->
      <el-dialog title :visible.sync="baseHouseVisible" width="60%" append-to-body>
        <div class="dialog_content">
          <div class="dialog_title">房屋基础信息</div>
          <el-form>
            <el-form-item label="所属房屋:">
              <el-input placeholder="点这儿选择房屋" @focus="selecthouseVisible = true" />
            </el-form-item>
            <el-form-item label="当前状态:">
              <el-select v-model="formInline.region" placeholder="请选择当前状态" class="labels">
                <el-option label="区域一" value="shanghai"></el-option>
                <el-option label="区域二" value="beijing"></el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </div>
        <!-- 第三层 -->
        <el-dialog title :visible.sync="selecthouseVisible" width="60%" append-to-body>
          <div class="dialog_content">
            <div class="dialog_title">选择房屋</div>
            <el-form :model="formInline" :inline="true">
              <div class="search">
                <el-form-item label="小区">
                  <el-input v-model="formInline.region" size="medium" placeholder="请输入小区名称"></el-input>
                </el-form-item>
                <el-form-item label="单元">
                  <el-input v-model="formInline.region" size="medium" placeholder="请输入单元号"></el-input>
                </el-form-item>
                <el-form-item label="门牌">
                  <el-input v-model="formInline.region" placeholder="请输入门牌号" size="medium"></el-input>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" size="mini">查询</el-button>
                </el-form-item>
              </div>
            </el-form>
            <el-table
              :data="tableData"
              style="width: 100%"
              :header-cell-style="{background: '#EBECF0',height:'44px',color:'#000000'}"
            >
              <el-table-column type="selection" width="55"></el-table-column>
              <el-table-column type="index" label="序号"></el-table-column>
              <el-table-column prop="date" label="小区" width="120"></el-table-column>
              <el-table-column prop="name" label="单元-门牌" width="120"></el-table-column>
              <el-table-column prop="name" label="层数" width="120"></el-table-column>
              <el-table-column prop="name" label=" 每层户数" width="120"></el-table-column>
              <el-table-column prop="name" label="所在楼层"></el-table-column>
            </el-table>
          </div>
          <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="selecthouseVisible = false">确定选择</el-button>
            <el-button @click="selecthouseVisible = false">取 消</el-button>
          </span>
        </el-dialog>
        <!-- 第三层结束 -->
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="baseHouseVisible = false">保存</el-button>
          <el-button @click="baseHouseVisible = false">取 消</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import ImgDialog from "@/components/Imgdialog";
import Graph from "@/components/Echarts/graph.vue";
export default {
  props: {},
  components: {
    ImgDialog,
    Graph
  },
  data() {
    return {
      activeIndex: "1",
      baseform: {
        name: "王一博",
        phone: "17388880909",
        type: "身份证",
        idNum: "32083019803122341",
        sex: "男",
        livetype: "租住",
        education: "高中",
        ismarried: "未婚",
        height: 185,
        work: "绿点科技"
      },
      houseform: {},
      carform: {},
      guijiform: {},
      innerVisible: false,
      isgraph: false,
      isShownimg: false,
      chooseImg: null,
      tags: [
        { type: "", name: "退伍军人", show: true },
        { name: "标签二", type: "success", show: false },
        { name: "标签三", type: "info", show: false },
        { name: "标签四", type: "warning", show: true },
        { name: "标签五", type: "danger", show: false },
        { type: "", name: "退伍军人", show: true },
        { name: "标签二", type: "success", show: false },
        { name: "标签三", type: "info", show: false },
        { name: "标签四", type: "warning", show: false }
      ],
      gou: require("@/assets/slice/gou.jpg"),
      url:
        "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
      history: [
        { name: "张扬阳", title: "初始提交", time: "2020-10-23 12:23:23" },
        { name: "张扬阳", title: "审核通过", time: "2020-10-23 12:23:23" }
      ],
      housedata: [
        {
          community: "新丰苑三期",
          door: "2-1002",
          status: "自住",
          relation: "房主",
          option: "取消人房关联"
        },
        {
          community: "新丰苑三期",
          door: "2-1002",
          status: "自住",
          relation: "房主",
          option: "取消人房关联"
        },
        {
          community: "新丰苑三期",
          door: "2-1002",
          status: "自住",
          relation: "房主",
          option: "取消人房关联"
        }
      ],
      cardata: [
        {
          carnum: "苏B-BY122",
          type: "月租车",
          relation: "关联",
          position: "B12"
        },
        {
          carnum: "苏B-BY122",
          type: "月租车",
          relation: "关联",
          position: "B12"
        },
        {
          carnum: "苏B-BY122",
          type: "月租车",
          relation: "关联",
          position: "B12"
        }
      ],
      guijidata: [
        {
          community: "新丰苑三期",
          time: "2020-10-23 12:23:23",
          position: "南门",
          type: "人脸抓拍",
          pic:
            "https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b3b39c89c7384b9e8fae08d35660e1b7~tplv-k3u1fbpfcp-watermark.image"
        },
        {
          community: "新丰苑三期",
          time: "2020-10-23 12:23:23",
          position: "南门",
          type: "人脸抓拍",
          pic:
            "https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b3b39c89c7384b9e8fae08d35660e1b7~tplv-k3u1fbpfcp-watermark.image"
        },
        {
          community: "新丰苑三期",
          time: "2020-10-23 12:23:23",
          position: "南门",
          type: "人脸抓拍",
          pic:
            "https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b3b39c89c7384b9e8fae08d35660e1b7~tplv-k3u1fbpfcp-watermark.image"
        }
      ],
      total: 100,
      page: 10,
      relate: {},
      formInline: {
        region: ""
      },
      baseHouseVisible: false,
      selecthouseVisible: false,
      // 第三层表格数据
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄"
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄"
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄"
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄"
        }
      ]
    };
  },
  mounted() {},
  methods: {
    handleSelect(index) {
      this.activeIndex = index;
    },
    handleinner() {
      this.innerVisible = true;
    },
    isShow(tag, i) {
      this.tags[i].show = !this.tags[i].show;
      console.log(tag, i);
    },
    showImg(img) {
      this.isShownimg = true;
      this.chooseImg = img;
    },
    closeImg() {
      this.isShownimg = false;
    },
    showEcharts() {
      this.isgraph = true;
    },
    addhouse() {
      this.baseHouseVisible = true;
    }
  }
};
</script>
<style lang="scss" scoped>
.dialog_content {
  .content {
    padding-top: 40px;
  }

  .input {
    width: 346px;
  }
  .inputs {
    width: 246px;
  }

  .search {
    display: flex;
    align-items: flex-end;
  }
  .label {
    display: block;
    text-align: left;
    margin-right: 20px;
    color: #666666;
    font-size: 14px;
    width: 100%;
  }
  .labels {
    width: 100%;
  }
}
.pagination {
  text-align: right;
  margin: 30px 0;
}
.select_tag {
  position: absolute;
  right: 0;
  bottom: 0;
  height: 15px;
  background-repeat: no-repeat;
}

.img {
  width: 50px;
  height: 34px;
}

.title {
  font-size: 20px;
  font-weight: 500;
}
.active {
  color: #0476ff !important;
}
.related {
  position: relative;
  padding: 0 24px;
  border: 1px solid #0476ff;
  width: 140px;
  height: 20px;
  color: #0476ff;
  .record {
    position: absolute;
    top: 17%;
    left: 5%;
  }
}
.tags {
  margin-right: 8px;
  margin-top: 12px;
  margin-bottom: 15px;
}
.edits {
  margin-right: 15px;
}
</style>
<style lang="scss">
.input .el-input__inner {
  height: 28px !important;
}
.el-menu--horizontal > .el-menu-item.is-active {
  border-bottom: 3px solid #0476ff !important;
}

/* .content{
  .el-form-item__label{
    display: block !important;
    text-align: left !important;
    width: 100% !important;
  }
} */
.el-form-item__label {
  display: block !important;
  text-align: left !important;
  width: 100% !important;
}
.content_scroll {
  overflow-y: scroll;
  overflow-x: hidden;
}
.content_scroll::-webkit-scrollbar {
  width: 10px;
}
.content_scroll::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: rgba(0, 0, 0, 0.2);
}
.content_scroll::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  border-radius: 0;
  background: rgba(0, 0, 0, 0.1);
}

// .align {
//   display: flex;
//   align-items: center;
//   .el-form-item--medium {
//     display: flex;
//     flex-direction: column;
//     justify-content: end;
//   }
// }
</style>
